<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

		<title>NanoVNA</title>


		<link rev="made" href="mailto:cho45@lowreal.net"/>
		<link rel="shortcut icon" href="./images/icons/icon-512x512.png" type="image/x-icon"/>

		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
		<link rel="stylesheet" href="./lib/material-design-icons-iconfont/material-design-icons.css">
		<link rel="stylesheet" href="./lib/vue-material.min.css">
		<link rel="stylesheet" href="./lib/theme/default.css">

		<link rel="manifest" href="./manifest.json" crossorigin="use-credentials">

		<script src="cordova.js" defer></script>
		<script src="./lib/chart.js" defer></script>
		<script src="./lib/chartjs-chart-smith.js" defer></script>
		<script src="./lib/vue.min.js" defer></script>
		<script src="./lib/vue-material.min.js" defer></script>
		<script src="./lib/strftime-min.js" defer></script>
		<script src="./lib/micro-strptime.js" defer></script>
		<script src="nanovna.js" crossorigin="use-credentials" defer></script>
		<script src="script.js" type="module" crossorigin="use-credentials" defer></script>
		<style>
			.md-app {
				height: 100vh;
			}

			input {
				width: 100%;
			}

			.md-field {
				margin-bottom: 10px;
			}

			canvas {
				width: 100%;
				height: 100%;
			}

			#graph {
				width: 100%;
				height: 100%;
			}

			#graph > canvas {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.md-app-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 8px 16px 8px 16px;
			}

			#traces {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
			}

			#traces .trace {
				margin-bottom: 7px;
			}

			.md-tabs-navigation .md-button {
				height: 32px;
			}

			#fab button {
				width: 40px;
				height: 40px;
			}

			.md-card {
				margin: 4px;
				vertical-align: top;
			}

			#numberInputting {
				font-size: 200%;
				text-align: right;
				font-weight: bold;
				padding: 20px 2px;
			}
			
			#numberInput {
				width: 100%;
				table-layout: fixed;
			}

			#numberInput .md-button {
				margin: 0;
				min-width: auto;
				min-height: 10vh;
				width: 100%;
				box-sizing: border-box;
				background: #efefef;
				font-size: 200%;
				text-transform: none;
			}

			@media (orientation: landscape) {
				.md-app-content {
					display: flex;
					flex-direction: row;
				}

				#input-form {
					max-width: 480px;
					min-width: 240px;
				}

				#graph {
				}
			}
		</style>
	</head>
	<body>
		<div id="app" style="visibility: hidden">
			<md-app  md-waterfall md-mode="fixed">
				<md-app-toolbar class="">
					<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
						<md-icon>menu</md-icon>
					</md-button>
					<h3 class="md-title" style="flex: 1">NanoVNA</h3>
					<md-button class="md-primary" v-show="disconnected" @click="connect()"><md-icon>usb</md-icon> connect</md-button>
					<md-button class="md-primary" v-show="status === 'connecting'" disabled><md-icon>usb</md-icon> connecting...</md-button>
					<template v-if="+range.segments === 1">
						<md-button class="md-primary" v-show="connected && autoUpdate" @click="pause"><md-icon>pause</md-icon> Pause</md-button>
						<md-button class="md-primary" v-show="connected && !autoUpdate" @click="resume"><md-icon>refresh</md-icon> Resume</md-button>
					</template>
					<template v-else>
						<md-button class="md-primary" v-show="connected &&  updating" @click="stop" :disabled="requestStop"><md-icon>pause</md-icon> Stop [{{progress.value}}/{{progress.total}}]</md-button>
						<md-button class="md-primary" v-show="connected && !updating" @click="refresh"><md-icon>refresh</md-icon> Update</md-button>
					</template>
				</md-app-toolbar>


				<md-app-drawer :md-active.sync="menuVisible" style="width: 280px;">
					<md-toolbar class="md-transparent" md-elevation="0">Actions</md-toolbar>

					<md-list>
						<md-subheader>Graph</md-subheader>
						<md-list-item @click="showMarkerDialog = true">
							<md-icon>label</md-icon>
							<span class="md-list-item-text">Setup Markers</span>
						</md-list-item>
						<md-list-item @click="showScaleDialog = true">
							<md-icon>height</md-icon>
							<span class="md-list-item-text">Setup Scales</span>
						</md-list-item>
						<md-list-item @click="addTrace">
							<md-icon>add</md-icon>
							<span class="md-list-item-text">Add Trace</span>
						</md-list-item>
						<md-list-item @click="changeSegments" :disabled="!connected">
							<md-icon>gradient</md-icon>
							<span class="md-list-item-text">Resolution...</span>
						</md-list-item>

						<md-subheader>Device</md-subheader>
						<md-list-item @click="connect()" v-show="disconnected">
							<md-icon>usb</md-icon>
							<span class="md-list-item-text">Connect</span>
						</md-list-item>
						<md-list-item disabled v-show="status === 'connecting'">
							<md-icon>usb</md-icon>
							<span class="md-list-item-text">Connect</span>
						</md-list-item>
						<md-list-item @click="disconnect()" v-show="connected">
							<md-icon>cancel</md-icon>
							<span class="md-list-item-text">Disconnect</span>
						</md-list-item>
						<md-subheader>Save</md-subheader>
						<md-list-item @click="saveAs('s1p')" :disabled="!connected">
							<md-icon>save_alt</md-icon>
							<span class="md-list-item-text">Save As .s1p</span>
						</md-list-item>
						<md-list-item @click="saveAs('s2p')" :disabled="!connected">
							<md-icon>save_alt</md-icon>
							<span class="md-list-item-text">Save As .s2p</span>
						</md-list-item>
						<md-list-item @click="saveAsPng('smith')" :disabled="!connected" v-show="showSmithChart">
							<md-icon>image</md-icon>
							<span class="md-list-item-text">Save Smith Chart As .png</span>
						</md-list-item>
						<md-list-item @click="saveAsPng('freq')" :disabled="!connected" v-show="showFreqChart">
							<md-icon>image</md-icon>
							<span class="md-list-item-text">Save Freq Chart As .png</span>
						</md-list-item>
						<md-list-item @click="capture" :disabled="!connected">
							<md-icon>video_label</md-icon>
							<span class="md-list-item-text">Capture Device</span>
						</md-list-item>

						<md-divider></md-divider>

						<md-subheader>State</md-subheader>
						<!--
						<md-list-item @click="test" :disabled="!connected">
							<md-icon>save</md-icon>
							<span class="md-list-item-text">Save State</span>
						</md-list-item>
						-->
						<md-list-item @click="showCalibrationDialog = true" :disabled="!connected">
							<md-icon>settings_input_antenna</md-icon>
							<span class="md-list-item-text">Calibrate...</span>
						</md-list-item>

						<md-list-item @click="recall(n)" :disabled="!connected" v-for="n in [0, 1, 2, 3, 4]">
							<md-icon>arrow_left</md-icon>
							<span class="md-list-item-text">Recall {{n}}</span>
						</md-list-item>

						<md-divider></md-divider>
						<md-subheader>About</md-subheader>
						<md-list-item @click="showAbout">
							<md-icon>info</md-icon>
							<span class="md-list-item-text">Version</span>
						</md-list-item>
						<md-list-item disabled>
							<md-icon></md-icon>
							<span class="md-list-item-text md-caption">Serial mode: {{ serialMode }}</span>
						</md-list-item>

						<md-list-item @click="quit">
							<md-icon>exit_to_app</md-icon>
							<span class="md-list-item-text">Quit</span>
						</md-list-item>
					</md-list>
				</md-app-drawer>

				<md-app-content>
					<div id="input-form">
						<md-tabs md-alignment="fixed">
							<md-tab @click="freqInputSelect = 'start-stop'" md-label="Start/Stop"></md-tab>
							<md-tab @click="freqInputSelect = 'center-span'" md-label="Center/Span"></md-tab>
						</md-tabs>
						<div class="md-layout md-gutter" v-show="freqInputSelect == 'start-stop'">
							<div class="md-layout-item md-size-50">
								<md-field class="">
									<label>Start</label>
									<md-input type="text" min="0" :value="formatFrequency(range.start)" :data-raw-value="range.start" @change="range.start = $event; updateStartStop()" name="start" data-units="G M k x1" data-unit="Hz"></md-input>
								</md-field>
							</div>
							<div class="md-layout-item md-size-50">
								<md-field class="">
									<label>Stop</label>
									<md-input type="text" min="0" :value="formatFrequency(range.stop)" :data-raw-value="range.stop" @change="range.stop = $event; updateStartStop()" name="stop" data-units="G M k x1" data-unit="Hz"></md-input>
								</md-field>
							</div>
						</div>
						<div class="md-layout md-gutter" v-show="freqInputSelect == 'center-span'">
							<div class="md-layout-item md-size-50">
								<md-field class="">
									<label>Center</label>
									<md-input type="text" min="0" :value="formatFrequency(range.center)" :data-raw-value="range.center" @change="range.center = $event; updateCenterSpan()" name="center" data-units="G M k x1" data-unit="Hz"></md-input>
								</md-field>
							</div>
							<div class="md-layout-item md-size-50">
								<md-field class="">
									<label>Span</label>
									<md-input type="text" min="0" :value="formatFrequency(range.span)" :data-raw-value="range.span" @change="range.span = $event; updateCenterSpan()" name="span" data-units="G M k x1" data-unit="Hz"></md-input>
								</md-field>
							</div>
						</div>

						<!-- md-list id="traces" class="md-dense">
							<md-list-item v-for="trace in traces">
								<md-icon>{{ trace.channel == "1" ? "call_missed" : "call_received"}}</md-icon>
								<span class="md-list-item-text">CH{{ trace.channel }} {{ trace.format }}</span>
								<md-button class="md-icon-button md-list-action">
									<md-icon class="md-primary">chat_bubble</md-icon>
								</md-button>
							</md-list-item>
						</md-list -->

						<div id="traces">
							<md-chip md-clickable :md-disabled="!trace.show" @click="editTrace(trace)" v-for="trace in traces" class="trace md-primary" :style="{ backgroundColor: trace.color }" :data-color="trace.color">CH{{ trace.channel }} {{ nameOfFormat(trace.format) }}</md-chip>
						</div>
					</div>
					<div style="display: flex; flex-direction: column; flex: 1">
						<md-tabs md-alignment="fixed" :md-active-tab='graphSelected' v-on:md-changed="tabChanged">
							<md-tab id='smith' md-label="SMITH"></md-tab>
							<md-tab id='freq'  md-label="FREQ"></md-tab>
							<md-tab id='tdr'  md-label="TDR"></md-tab>
						</md-tabs>
						<div style="position: relative; flex: 1">
							<div id="graph" class="" style="position: relative">
								<canvas ref="smith" id="smith" width="800" height="800" v-show="showSmithChart"></canvas>
								<canvas ref="freq" id="freq" width="800" height="800" v-show="showFreqChart"></canvas>
								<canvas ref="TDR" id="tdr" width="800" height="800" v-show="showTDRChart"></canvas>
								<div v-show="showTDRChart" style="position: absolute; top: 25px; right: 60px; background: rgba(255, 255, 255, 80%)">
									<div>Peak: {{peakTDR * (velocityOfSignalPropagation / 100)}}m</div>
									<md-field class="" style="width: 200px; margin: 0 0 0 auto">
										<label>Velocity of signal propagation</label>
										<md-input type="number" min="0" max="100" step="1" v-model="velocityOfSignalPropagation" data-unit="%"></md-input>
										<span class="md-suffix">%</span>
									</md-field>
								</div>
							</div>
						</div>
					</div>
				</md-app-content>
			</md-app>

			<md-snackbar :md-active.sync="snackbar.show" md-persistent>
				{{ snackbar.message }}
			</md-snackbar>
			<md-dialog-alert :md-active.sync="alert.show" :md-title="alert.title" :md-content="alert.content"></md-dialog-alert>


			<md-speed-dial class="md-bottom-right" md-event="click" id="fab">
				<md-speed-dial-target>
					<md-icon class="md-morph-initial">show_chart</md-icon>
					<md-icon class="md-morph-final">close</md-icon>
				</md-speed-dial-target>


				<md-speed-dial-content>
					<md-button class="md-icon-button" @click="showScaleDialog = true">
						<md-icon>height</md-icon>
					</md-button>

					<md-button class="md-icon-button" @click="addTrace()">
						<md-icon>add</md-icon>
					</md-button>
				</md-speed-dial-content>
			</md-speed-dial>

			<md-dialog :md-active.sync="showTraceDialog">
				<md-dialog-title :style="{ backgroundColor: currentTraceSetting.color, color: '#fff' }">Trace</md-dialog-title>
				<md-dialog-content>
					<md-switch v-model="currentTraceSetting.show">Show</md-switch>
					<md-field>
						<label for="traceChannel">Channel</label>
						<md-select v-model="currentTraceSetting.channel" name="traceChannel" id="traceChannel">
							<md-option value="0">CH0 Reflect</md-option>
							<md-option value="1">CH1 Through</md-option>
						</md-select>
					</md-field>
					<md-field>
						<label for="traceFormat">Trace Format</label>
						<md-select v-model="currentTraceSetting.format" name="traceFormat" id="traceFormat">
							<md-option value="smith">Smith Chart</md-option>
							<md-option value="logmag">LogMag</md-option>
							<!--md-option value="delay">Delay</md-option-->
							<md-option value="phase">Phase</md-option>
							<md-option value="swr">SWR</md-option>
							<!-- md-option value="polar">Polar</md-option -->
							<md-option value="linear">Linear</md-option>
							<md-option value="real">Real</md-option>
							<md-option value="imag">Image</md-option>
							<md-option value="R">R (Resistance)</md-option>
							<md-option value="X">X (Reactance)</md-option>
							<md-option value="Z">|Z| (Impedance)</md-option>
						</md-select>
					</md-field>
					<md-field>
						<label for="traceType">Trace Type</label>
						<md-select v-model="currentTraceSetting.type" name="traceType" id="traceType">
							<md-option value="clear">Clear Write</md-option>
							<md-option value="freeze">Freeze</md-option>
							<md-option value="maxhold" v-show="currentTraceSetting.format !== 'smith'">Max Hold</md-option>
							<md-option value="minhold" v-show="currentTraceSetting.format !== 'smith'">Min Hold</md-option>
							<md-option value="videoavg" v-show="currentTraceSetting.format !== 'smith'">Video Average</md-option>
							<md-option value="poweravg" v-show="currentTraceSetting.format !== 'smith'">Power Average</md-option>
						</md-select>
					</md-field>
					<md-field v-show="['videoavg', 'poweravg'].some(i => i === currentTraceSetting.type)">
						<label>Average Count</label>
						<md-input v-model="currentTraceSetting.avgCount" min="2" max="1000"></md-input>
					</md-field>
					<md-button class="md-primary" @click="currentTraceSetting.color = colorGen()">Change Color</md-button>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="md-accent" @click="deleteTrace" v-show="currentTraceSetting.src">Delete</md-button>
					<md-button class="" @click="showTraceDialog = false">Cancel</md-button>
					<md-button class="md-primary" @click="saveTrace">OK</md-button>
				</md-dialog-actions>
			</md-dialog>

			<md-dialog :md-active.sync="showScaleDialog">
				<md-dialog-title>Scale Settings</md-dialog-title>
				<md-dialog-content>
					<md-card class="md-layout-item md-size-100 md-small-size-100" v-for="scaleType in scaleTypes">
						<md-card-header>
							<div class="md-subheading">{{ scaleType.label }} </div>
						</md-card-header>
						<md-card-content>
							<div class="md-layout md-gutter">
								<div class="md-layout-item md-small-size-50">
									<md-field>
										<label>Min</label>
										<md-input type="number" v-model="scales[scaleType.key].min" data-units="- x1" :data-unit="scaleType.suffix"></md-input>
										<span class="md-suffix" v-show="scaleType.suffix">{{scaleType.suffix}}</span>
									</md-field>
								</div>
								<div class="md-layout-item md-small-size-50">
									<md-field>
										<label>Max</label>
										<md-input type="number" v-model="scales[scaleType.key].max" data-units="- x1" :data-unit="scaleType.suffix"></md-input>
										<span class="md-suffix" v-show="scaleType.suffix">{{scaleType.suffix}}</span>
									</md-field>
									</md-field>
								</div>
							</div>
						</md-card-content>
					</md-card>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="" @click="showScaleDialog = false">Cancel</md-button>
					<md-button class="md-primary" @click="applyScaleSetting">OK</md-button>
				</md-dialog-actions>
			</md-dialog>

			<md-dialog :md-active.sync="showCalibrationDialog">
				<md-dialog-title>Calibration</md-dialog-title>
				<md-dialog-content>
					<md-steppers md-vertical :md-active-step.sync="calibrationStep">
						<md-step id="reset" md-label="Reset">
							<p>Reset current calibration status</p>
							<md-button class="md-accent md-raised" @click="calibration('reset')" :disabled="calibrationRunning">Reset</md-button>
						</md-step>
						<md-step id="open" md-label="OPEN">
							<p>Connect OPEN to CH0</p>
							<md-button class="md-accent md-raised" @click="calibration('open')" :disabled="calibrationRunning">CAL OPEN</md-button>
						</md-step>
						<md-step id="short" md-label="SHORT">
							<p>Connect SHORT to CH0</p>
							<md-button class="md-accent md-raised" @click="calibration('short')" :disabled="calibrationRunning">CAL SHORT</md-button>
						</md-step>
						<md-step id="load" md-label="LOAD">
							<p>Connect LOAD to CH0</p>
							<md-button class="md-accent md-raised" @click="calibration('load')" :disabled="calibrationRunning">CAL LOAD/ISOLN</md-button>
						</md-step>
						<md-step id="thru" md-label="THRU">
							<p>Connect CH0 and CH1 with cable</p>
							<md-button class="md-accent md-raised" @click="calibration('thru')" :disabled="calibrationRunning">CAL THRU</md-button>
						</md-step>
						<md-step id="done" md-label="Done">
							<p>Save calibration data</p>
							<md-button class="md-accent md-raised" @click="calibration('done', 0)">Save 0</md-button>
							<md-button class="md-accent md-raised" @click="calibration('done', 1)">Save 1</md-button>
							<md-button class="md-accent md-raised" @click="calibration('done', 2)">Save 2</md-button>
							<md-button class="md-accent md-raised" @click="calibration('done', 3)">Save 3</md-button>
						</md-step>
					</md-steppers>
				</md-dialog-content>

				<md-dialog-actions>
					<md-button class="md-primary" @click="showCalibrationDialog = false">Close</md-button>
				</md-dialog-actions>
			</md-dialog>

			<md-dialog :md-active.async="showCaptureDialog">
				<md-dialog-title>Capture</md-dialog-title>
				<md-dialog-content>
					<canvas ref="capture" width="320" height="240" style="image-rendering: pixelated;"></canvas>
					<md-progress-bar md-mode="indeterminate" v-show="capturing"></md-progress-bar>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="md-primary" v-show="!capturing" @click="downloadCapture"><md-icon>cloud_download</md-icon> Download</md-button>
					<md-button class="md-accent" v-show="!capturing" @click="capture"><md-icon>refresh</md-icon> Recapture</md-button>
					<md-button class="" @click="showCaptureDialog = false">Close</md-button>
				</md-dialog-actions>
			</md-dialog>

			<md-dialog :md-active.async="showMarkerDialog">
				<md-dialog-title>Marker Settings</md-dialog-title>
				<md-dialog-content>
					<md-list>
						<md-list-item v-for="marker in markers">
							<md-icon class="md-primary">label</md-icon>
							<div class="md-list-item-text">
								<span>{{ formatFrequency(marker.freq) }}</span>
							</div>
							<md-button class="md-icon-button md-list-action" @click="removeMarker(marker)">
								<md-icon>delete</md-icon>
							</md-button>
						</md-list-item>
					</md-list>

					<md-button class="md-raised" @click="addMarker">Add</md-button>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="" @click="showMarkerDialog = false">Close</md-button>
				</md-dialog-actions>
			</md-dialog>

			<md-dialog :md-active.async="showAboutDialog">
				<md-dialog-title>About</md-dialog-title>
				<md-dialog-content style="max-width: 100vw">
					
					<pre style="font-size: 11px; line-height: 1.11; width: 100%; overflow: auto">{{deviceInfo.info}}</pre>
					<md-table>
						<md-table-row>
							<md-table-head></md-table-head>
							<md-table-head>Version</md-table-head>
							<md-table-head>Link</md-table-head>
						</md-table-row>
						<md-table-row>
							<md-table-head>Device</md-table-head>
							<md-table-cell>
								{{deviceInfo.version || 'unknown'}}
							</md-table-cell>
							<md-table-cell>
								<a href="https://github.com/ttrftech/NanoVNA">NanoVNA</a>,
								<a href="https://github.com/hugen79/NanoVNA-H">NanoVNA-H</a>
							</md-table-cell>
						</md-table-row>
						<md-table-row>
							<md-table-head>Web</md-table-head>
							<md-table-cell>
								{{ webVersion || 'unknown' }}
							</md-table-cell>
							<md-table-cell>
								<a href="https://github.com/cho45/NanoVNA-WebUSB-Client">NanoVNA WebUSB Client</a>
							</md-table-cell>
						</md-table-row>
					</md-table>
					
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="" @click="showAboutDialog = false">Close</md-button>
				</md-dialog-actions>
			</md-dialog>



			<md-dialog :md-active.async="showNumberInput" style="max-width: 640px">
				<md-dialog-title>Input {{ numberInput.title }}</md-dialog-title>
				<md-dialog-content>
					<div style="height: 100%; width: 100%; display: flex; flex-direction: column">
						<div style="flex: 1">
							<div v-html="numberInput.descriptionHtml" v-if="numberInput.descriptionHtml"></div>
							<div v-else>
								{{ numberInput.description || '' }}
							</div>
						</div>
						<div id="numberInputting">
							<span class="number" v-if="numberInput.input">{{ formatNumber(numberInput.input) }}</span>
							<span class="number" v-else style="color: rgba(0,0,0,.54);">{{ formatNumber(numberInput.prev) }}</span>
							<span class="unit">{{ numberInput.unit }}</span>
						</div>
						<table id="numberInput">
							<tr>
								<td><md-button class="" @click="numberInputButton">7</md-button></td>
								<td><md-button class="" @click="numberInputButton">8</md-button></td>
								<td><md-button class="" @click="numberInputButton">9</md-button></td>
								<td><md-button class="" @click="numberInputButton" v-show="numberInput.units[0]">{{ numberInput.units[0] }}</md-button></td>
							</tr>
							<tr>
								<td><md-button class="" @click="numberInputButton">4</md-button></td>
								<td><md-button class="" @click="numberInputButton">5</md-button></td>
								<td><md-button class="" @click="numberInputButton">6</md-button></td>
								<td><md-button class="" @click="numberInputButton" v-show="numberInput.units[1]">{{ numberInput.units[1] }}</md-button></td>
							</tr>
							<tr>
								<td><md-button class="" @click="numberInputButton">1</md-button></td>
								<td><md-button class="" @click="numberInputButton">2</md-button></td>
								<td><md-button class="" @click="numberInputButton">3</md-button></td>
								<td><md-button class="" @click="numberInputButton" v-show="numberInput.units[2]">{{ numberInput.units[2] }}</md-button></td>
							</tr>
							<tr>
								<td><md-button class="" @click="numberInputButton">0</md-button></td>
								<td><md-button class="" @click="numberInputButton">.</md-button></td>
								<td><md-button class="" @click="numberInputButton">&#x232B;</md-button></td>
								<td><md-button class="" @click="numberInputButton" v-show="numberInput.units[3]">{{ numberInput.units[3] }}</md-button></td>
							</tr>
						</table>
					</div>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="" @click="showNumberInput = false">Cancel</md-button>
				</md-dialog-actions>
			</md-dialog>

		</div>
		<script>
			window.addEventListener('load', function() {
				if ('serviceWorker' in navigator) {
					navigator.serviceWorker.register('./sw.js');
				}
			});
		</script>
	</body>
</html>
